<template>
	<div class="mlr-24 bg-white nav_address">
		<div class="address pb-24 mb-24">
			<div>
				<img src="@/assets/images/physio/address1.png" />
			</div>
			<div>
				<div class="fs-28">{{ info.ProvinceName }}{{ info.CityName }}{{ info.AreaName }}{{ info.StreetName }}{{
					info.ContactAddress }}</div>
				<div class="color-gray7 navigat">
					<div><span>{{ info.ContactName }}</span>{{ info.ContactTel }}</div>
					<div v-if="isArtificer === '1'" class="circles" @click="navigation(info)">
						<svg-icon icon-class="daohang" class="fs-24 color-gray mt-10 ml-12" @goPage="navigation(info)" />
						<span class="ml-5">去这里</span>
					</div>
				</div>
			</div>
		</div>
		<div class="serve_time pb-24 mb-24">
			<div>
				<img src="@/assets/images/physio/time.png" />
			</div>
			<div>
				<div class="fs-28"><span>服务时间</span>{{ info.ServiceStartTime }}</div>
				<div class="color-gray7">技师预计会在服务前10分钟到达</div>
			</div>
		</div>
		<div class="serves fs-28">
			<img src="@/assets/images/physio/technicist.png" /><span>服务技师</span>
			<img-box class="classImg" :isBr50="isBr50" :img-url="photo" /> <span>{{ info.ArtificerName }}</span>
		</div>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
import { GetArtificerInfo } from 'api/physio'
export default {
	components: {
		imgBox
	},
	props: {
		info: {
			type: Object,
		},
		isArtificer: {
			type: String,
			default: 0,
		}
	},
	data() {
		return {
			photo: '',
			isBr50: true, //用来判断图片圆形			
		}
	},
	created() {
		setTimeout(() => {
			GetArtificerInfo({ artifcerUserId: this.info.ArtificerUserId }).then(res => {
				this.name = res.Data.Name
				if (res.Data.Photo != '') {
					this.photo = res.Data.Photo.split(',')[0]
				}
			})
		}, 200)
	},
	methods: {
		// 打开导航
		navigation(info) {
			const item = {}
			item.Lng = info.Lng
			item.Lat = info.Lat
			item.ContactAddress = info.ContactAddress
			item.name = info.ProvinceName + info.CityName + info.AreaName
			this.$utils.navigation(item)
		},
	}
}
</script>
<style lang="scss" scoped>
.nav_address {
	border-radius: 16px;
	padding: 24px;

	.address {
		border-bottom: 2px solid #F2F3FC;
		display: flex;
		align-items: center;

		span {
			border-right: 1px solid #F2F3FC;
			padding-right: 8px;
			margin-right: 8px;
		}
	}

	img {
		width: 40px;
		height: 40px;
		margin-right: 16px;
	}

	.serve_time {
		border-bottom: 2px solid #F2F3FC;
		display: flex;
		align-items: center;
	}

	.fs-28 span {
		margin-right: 60px;
	}

	.serves {
		display: flex;
		align-items: center;

		span {
			margin-right: 60px;
		}
	}
}

.classImg {
	width: 72px;
	height: 72px;
	margin-right: 24px;
	border-radius: 50%;
}

.navigat {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.circles {
	padding: 0 50px;
}
</style>
